<template>
    <div class="main-view">
        <Row>
            <i-col span="24">
                <Card  class="h-global-overview-card">
                    <p class="header" slot="title">
                        <Icon type="stats-bars"></Icon>
                         Test Process Overview {{current_data_set}}
                    </p>
                    <div class="overview">
                        <global ref="global" @barSelect="updateList"></global>
                    </div>
                </Card>
            </i-col>
        </Row>
        <Row :gutter="16" class="h-row-for-table-and-tab" style="margin-top:10px">
            <i-col span="5" class="h-col-for-table">
                <Card class="h-card-table">
                    <p class="header" slot="title">
                        <Icon type="ios-settings-strong"></Icon>
                        Test List
                        <Button class="h-btn-apply" size="small"
                        type="default" 
                        @click="$_selectTestidsForTimeLine()">
                       view by test {{''/*selected_testids.length*/}}
                        </Button>                         
                        <Button class="h-btn-apply" size="small"
                        type="default" 
                        @click="$_selectTestidsToChannels()">view in channel {{''/*selected_testids.length*/}}</Button>                       
                    </p>
                    <Table class="h-table" height="650" 
                    :stripe="false" 
                    highlight-row size="small" 
                    :columns="table.columns" :data="table.data" 
                    :loading="listLoading" 
                    @on-selection-change="$_changeSelectesTestids"
                    @on-row-click="selectRow"></Table>
                    
                        <Page class="h-page" 
                        :current="table.records.current" 
                        :total="table.records.total" 
                        size="small" 
                        :show-total="true" 
                        :show-elevator="true" 

                        :simple="true"
                        :show-sizer="false"
                        :page-size="table.records.pageSize" 
                        @on-change="changePage"></Page>     

                </Card>
            </i-col>
            <i-col span="19" class="h-col-for-tabs">
                    <Tabs type="card" class="h-tabs">
                        <TabPane label="Test-based Channel Pattern View" >
                            <trend ref="trend"></trend>
                        </TabPane>
                        <TabPane label="Mode-based Channel Pattern View" >
                            <channels @test-id-data-loading="$_onTestIdDataLoading" ref="channels"></channels>
                        </TabPane>
                        <TabPane label="Performance Dynamic View">
                            <feature></feature>
                        </TabPane>
                    </Tabs>
            </i-col>
        </Row>
    </div>
</template>

<script>
/* eslint-disable */
import global from "@/components/global";
import trend from "@/views/trends/index";
import feature from "@/views/features/index";
import channels from "@/views/channels/ChannelsView";

export default {
  components: {
    global,
    trend,
    feature,
    channels
  },
  data() {
    return {
      listLoading: false,
      formItem: {
        select: "test_id",
        type: true,
        anomaly: true
      },
      table: {
        records: {
          total: 0,
          pageSize: 100,
          current: 1
        },
        columns: [
          {
            type: "selection",
            width: 22
          },
          {
            title: "No.", //编号
            key: "test_id",
            width: 60,
            align: "center",
            sortable: true
          },
          {
            title: "Date Time", //日期
            key: "date",
            align: "center",
            width: 146,
            sortable: true
          },
          {
            title: "Start Mode", //类型
            key: "abnormal_type",
            width: 77, // 适应王磊的屏幕 =>造成的副作用是滚动条看起来不自然
            render: (h, params) => {
              const row = params.row;
              const text = ($ => {
                let s = this.abnormal_type2comment[String(row.abnormal_type)];
                if (s && s.startsWith("C")) {
                  s = s.replace("C", "T");
                }
                return s;
              })();
              return h(
                "div",
                {
                  style: {
                    // width: "25px",
                    height: "20px",
                    border: "1px solid #e2e2e200",
                    borderRadius: "3px",
                    textAlign: "center",
                    backgroundColor: "#e2e2e200",
                    boxShadow: "2px 2px 0px #aaaaaa00"
                  }
                },
                text
              );
            }
          }
        ],
        data: []
      },
      selectionParams: {
        starterId: "",
        dates: "", // 日期 string
        types: "" // 类型的在数据库中对应的值
      },
      selected_testids: []
    };
  },
  computed: {
    selection() {
      return this.$store.state.selection;
    },
    starterId() {
      return this.$store.state.starterId;
    },
    hasSelected() {
      return this.$store.state.selected;
    },
    abnormal_type2comment() {
      return this.$store.getters["abnormal_type2comment"];
    },
    current_data_set() {
      return `[ ${this.$store.getters["current_dataset_name"]} ]`;
    }
  },
  watch: {
    starterId() {
      this.loadDefaultData(1);
    }
  },
  methods: {
    // 默认无交互时获取默认数据的方法
    loadDefaultData(page) {
      this.listLoading = true;
      const data = {
        starterId: this.starterId,
        // sortMode: this.formItem.select,
        offset: (page - 1) * this.table.records.pageSize,
        size: this.table.records.pageSize
      };
      this.$http
        .get("/starter/list/default/", {
          params: data
        })
        .then(res => {
          this.table.records.total = res.data["total"];
          this.table.data = res.data["list"].map(d => {
            return {
              test_id: d.test_id,
              date: d.start_time.replace(/[TZ]/g, " "),
              abnormal_type: d.abnormal_type
            };
          });
          this.selected_testids = []; //变化刷选范围后选中的test_id予以删除
        })
        .catch(err => {
          console.error(err);
          this.$Message.error("Failed to load table data");
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    // 获取选择列表数据的方法
    loadSelectData(page) {
      //   debugger;
      this.listLoading = true;
      if (this.multiMode) {
        // 多选时的取值逻辑
      } else {
        // 单选时的取值逻辑
        this.$http
          .get("/starter/overview/selection/", {
            params: {
              starterId: this.starterId,
              // sortMode: this.formItem.select,
              offset: (page - 1) * this.table.records.pageSize,
              size: this.table.records.pageSize,
              dates: this.selectionParams.dates,
              types: this.selectionParams.types
            }
          })
          .then(res => {
            this.table.records.total = res.data["total"];
            this.table.data = res.data["list"].map(d => {
              return {
                test_id: d.test_id,
                date: d.start_time.replace(/[TZ]/g, " "),
                start_type: d.start_type,
                abnormal_type: d.abnormal_type
              };
            });

            this.selected_testids = []; //变化刷选范围后选中的test_id予以删除
          })
          .catch(err => {
            console.error(err);
            this.$Message.error("Failed to load table data");
          })
          .finally(() => {
            this.listLoading = false;
          });
      }
    },
    updateList(e) {
      // 执行列表数据取值请求
      this.table.records.current = 1;
      this.selectionParams.starterId = this.starterId;
      this.selectionParams.dates = e.dates;
      this.selectionParams.types = e.types;
      this.$refs.trend.clearData();
      this.loadSelectData(1);
      // 执行时序趋势图的数据请求
      this.$refs.trend.loadTrend(this.selectionParams);
      //给channels传dates和types
      // debugger
      this.$refs["channels"].setDatesAndTypes(e.dates, e.types);
    },
    // 翻页
    changePage(p) {
      this.table.records.current = p;
      if (!this.hasSelected) {
        this.loadDefaultData(p);
      } else {
        this.loadSelectData(p);
      }
    },
    // 清空触发操作
    clear() {
      // this.$refs.global.recover();
      // this.table.records.total = this.range[1] - this.range[0] + 1;
      // this.$refs.trend.clearData();
      // this.loadDefaultData(1);
    },
    // 单击表格某一行触发交互动作
    selectRow(data) {
      this.$store.commit("setTestId", data.test_id);
    },
    $_changeSelectesTestids(rows) {
      let testids = rows.map(d => d.test_id);
      this.selected_testids = testids;
    },
    $_selectTestidsToChannels() {
      // let testids = rows.map(d => d.test_id);
      // debugger
      this.$refs["channels"].setTestids(this.selected_testids);
      this.$store.commit("highlight_testids", this.selected_testids);
    },
    $_selectTestidsForTimeLine() {
      this.$store.commit("testids4Timeline", this.selected_testids);
    },
    $_onTestIdDataLoading(bool) {
      this.listLoading = bool;
    }
  },
  created() {
    this.loadDefaultData(1);
  }
};
</script>

<style lang="less">
.main-view {
  .ivu-card-body {
    padding-top: 0px;
  }
  .h-card-table {
    height: 745px;
  }
  .h-row-for-table-and-tab{
    display: flex;
  }
  .h-tabs {
    height: 745px;
    background-color: #ffffff7d;
    & > div.ivu-tabs-bar {
      margin-bottom: 0px;
      .ivu-tabs-tab {
        border-width: 0px;
        height: 36px;
        padding-top: 8px;
      }
      & > .ivu-tabs-nav-container {
        height: 36px;
      }
    }
  }
  p.header {
    height: 24px;
    .h-btn-apply {
      // float: right;
      transform: translate(60px, 0);
    }
  }
  .h-page {
    // display: inline-flex;
    margin-bottom: 5px;
    margin-left: 0px;
    text-align: left;
    &.ivu-page.mini > li,
    &.ivu-page.mini > div {
      margin-top: 5px;
    }
    &.ivu-page.mini > li {
      &.ivu-page-item-active {
        background-color: #b5b5b5;
      }
    }
    &.ivu-page.mini {
      .ivu-page-options {
        margin-left: 0px;
        // white-space:pre;
        &::before {
          content: "\A";
          display: block;
          // border: 2px solid red;
          width: 100%;
        }
        &::after {
          content: " ";
          display: block;
          // border: 2px solid blue;
          width: 100%;
        }
      }
    }
  }
  .h-global-overview-card {
    // height:300px;
    .ivu-card-body {
      padding: 0;
    }
  }
  .h-col-for-table {
    &.ivu-col-span-5 {
      width: 370px;
    }
  }
  .h-col-for-tabs {
    &.ivu-col-span-19 {
      width: 1537px;
      .ivu-tabs-nav-scroll {
        background-color: #e2e2e2;
        .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
          border-width: 0;
        }
      }
      .ivu-card-bordered {
        border-width: 0px;
      }
    }
  }
  .h-table {
    margin: 10px auto;
    .ivu-table th {
      text-overflow: clip;
    }
    div.ivu-table-cell {
      padding-left: 6px;
      padding-right: 8px;
    }
    .ivu-table-body {
      overflow-x: hidden;
      overflow-y: scroll;
      display: inline-block;
    }
  }
}
</style>
